<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<title>Insert title here</title>
</head>
<body>
  <div>
     <ul>
       name<li><input name="name"/></li>
       sex<li><input name="sex" value="true" type="radio"/>男<input value="false" name="sex" type="radio"/>女</li>
       sal<li><input name="sal"/></li>
       birth<li><input type="date" name="birth"/></li>
       <li><button id="add">add</button></li>
     </ul>
  
  </div>
  
  <div>
    <table>
      <thead>
       <tr>
          <td>id</td>
          <td>name</td>
          <td>sal</td>
          <td>sex </td>
	      <td>birth</td>
	      <td>删除</td>
	      <td>修改</td>
       </tr>
      </thead>
      <tbody id="tb"></tbody>
    </table>
  
  </div>
</body>

<script type="text/javascript">
  
  //ajax请求
    var ajaxProduce = function(){
        var ajax = {}
        
        ajax.post = function(requestConfig,callback,otherParam){
          requestConfig.type="POST"
          $.ajax(requestConfig).done(function(data){
          
            callback(data,otherParam);
          });
        };
        
         ajax.get = function(requestConfig,callback,otherParam){
          requestConfig.type="GET";
          
          requestConfig.contentType = "application/json";
          $.ajax(requestConfig).done(function(data){
            callback(data,otherParam);
          });
        };
      return ajax;
    };



 function CustomerManager(template){
     
     var ajax = ajaxProduce();
     this.list ;
     
     this.initial = function(){
      var requestConfig = {};
          requestConfig.url = "list";
          requestConfig.contentType = "application/json";
           ajax.get(requestConfig,loadTable,template);
      $("#add").on("click",function(){
       alert("");
      var param = {"cname":$("input[name='name']").val(),
         "sex":$("input[name='sex']").val(),
         "sal":$("input[name='sal']").val(),
         "birth":$("input[name='birth']").val()
        };
         var requestConfig={};
         requestConfig.url = "addcustomer";
         requestConfig.data = JSON.stringify(param);
         requestConfig.contentType = "application/json";
         ajax.post(requestConfig,addShow,template);
        });
           
     }
     
     function loadTable(data,tpl){
       this.list = data;
       initTable(tpl);
      
         addEvent();
     }
     
     function addShow(data,tpl){
       this.list.push(data);
       initTable(tpl);
         addEvent();
     }
     
     function deleteShow(data,tpl){
      this.list = this.list.filter(function(item){
                		return item.id!=data.id;
                	});
       initTable(tpl);
       
         addEvent();
     }
     
     function updateCustomer(data,tpl){
       
     }
     
     function addEvent(){
       $(".delete").on("click",function(){
           var id = $(this).attr("id");
           var data = {"id":id};
           var requestConfig={};
           requestConfig.url = "delete";
           requestConfig.data = JSON.stringify(data);
           requestConfig.contentType = "application/json";
           ajax.post(requestConfig,deleteShow,template);
       });
       
       $(".update").on('show.bs.modal', function (event) {
             var button = $(event.relatedTarget) // Button that triggered the modal
             var recipient = button.data('whatever') // Extract info from data-* attributes
           // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
            // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
              var modal = $(this)
             modal.find('.modal-title').text('New message to ' + recipient)
            modal.find('.modal-body input').val(recipient)
         });
     
     }
     
     
     
     //table渲染器
   
      function initTable(tbody){
        //alert("tanleView.initTable:"+list);
        tbody.html("");
        if(list){
         list.forEach(c=>{
           var tr = $("<tr></tr>");
           var td1 = $("<td></td>");
           var td2 = $("<td></td>");
           var td3 = $("<td></td>");
           var td4 = $("<td></td>");
           var td5 = $("<td></td>");
           var td6 = $("<td></td>");
           var td7 = $("<td></td>");
           var dbt =$("<button>删除</button>");
           var ubt =$("<button>修改</button>");
           dbt.attr("id",c.id).addClass("delete").data(c);
           ubt.attr("id",c.id).addClass("update").data(c);
           td1.text(c.id);
           td2.text(c.cname);
           td3.text(c.sal);
           td4.text(c.sex);
           td5.text(c.birth);
           td6.append(dbt);
           td7.append(ubt);
           tr.append(td1);
           tr.append(td2);
           tr.append(td3);
           tr.append(td4);
           tr.append(td5);
           tr.append(td6);
           tr.append(td7);
           tbody.append(tr);
        });
        };
        
      };
      
 }
 $(function(){
  var manager = new CustomerManager($("#tb"));
    manager.initial();
 
 
 });
</script>
</html>